<template>
	<view class="decLoanIndex">
		<nav-bars ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			:title="titleText"></nav-bars>
		<image src="https://manager.ryz1620.com/static/DIY/bgdaik.png" mode="widthFix"></image>
		<view class="formContent">
			<view class="infoBox">
				<view class="item">
					<text>姓名</text>
					<input type="text" value="" v-model="form.name" placeholder-class="inputPlace" placeholder="请输入姓名" />
				</view>
				<view class="item">
					<text>手机号码</text>
					<input type="text" value="" maxlength="11" v-model="form.phone" placeholder-class="inputPlace" placeholder="请输入手机号码"/>
				</view>
				<view class="item">
					<text>月收入</text>
					<view class="select" :class="{'active':form.month_income!=''}" @click="openSelect(3)">
						{{form.month_income?form.month_income:'请选择'}}<view class="iconfont icon-more"></view>
					</view>
				</view>
				<view class="item">
					<text>所在地区</text>
					<view class="select" :class="{'active':province!=''}">
						<biaofun-region v-if="form.province" @change="onChangeRegion" :defaultValue="defaultValue"></biaofun-region>  
						<biaofun-region v-else @change="onChangeRegion"></biaofun-region>  
						<view class="iconfont icon-more"></view>
					</view>
				</view>
				<view class="item">
					<text>所属小区</text>
					<input type="text" value="" v-model="form.address" placeholder-class="inputPlace" placeholder="请输入所属小区"/>
				</view>
		
			</view>
			<u-select v-model="show" :list="list" @confirm="confirmSelect"></u-select>
			<view class="checkBox">
				<u-checkbox-group>
					<u-checkbox v-model="checked" size="30" active-color="#3B83E8"><text class="checkText">我已阅读《融易装隐私协议》</text></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="btn">
				<button type="default" @click="toNext">提交信息</button>
			</view>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js';
	import biaofunRegion from '@/pages_3D/components/biaofun-region/biaofun-region.vue';
	import service_decLoan from '@/service/decLoan.js'
	export default{
		components: {biaofunRegion},
		data(){
			return{
				baseImg:this.$static,
				form:{
					id:null,
					name:'',		//姓名
					phone:'', 		//手机号码
					month_income:'',//月收入
					province_id:'',
					city_id:'',
					district_id:'',
					province:'',
					city:'',
					district:'',
					address:'',
					urgent_contact:''
				},
				background:'',
				scrollTop: 0,
				titleText: '',
				topCardId:'',
				backCardId:'',
				show:false,
				list:[],
				selectType:'',
				contacts1:{
					name:'',
					relation:'',
					phone:'',
				},
				contacts2:{
					name:'',
					relation:'',
					phone:'',
				},
				contacts3:{
					name:'',
					relation:'',
					phone:'',
				},
				urlStatus:null, //编辑还是新增0新增1编辑
				defaultValue:[],
				checked:false
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			this.scrollTop = scrollTop;
			if (e.scrollTop >= 300) {
				this.titleText = '装修贷';
			} else {
				this.titleText = '';
			}
			// 滑动距离超过用户名 => 显示导航栏
		},
		methods:{
			// 下一步按钮
			toNext(){
				if(!this.checked){
					uni.showToast({
						title:'我已阅读《融易装隐私协议》',
						icon:'none'
					})
					return
				}
				if(this.form.name==''){uni.showToast({title:'请输入姓名',icon:'none'}); return};
				if(this.form.phone==''){uni.showToast({title:'请输入手机号码',icon:'none'}); return};
				if(this.form.month_income==''){uni.showToast({title:'请选择月收入',icon:'none'}); return};
				if(this.form.province_id=='' && this.form.city_id=='' && this.form.district_id==''){uni.showToast({title:'请选择地区',icon:'none'}); return};
				if(this.form.address==''){uni.showToast({title:'请填写详细地址',icon:'none'}); return};
				service_decLoan.newLoanArchives(this.form).then(res=>{
					console.log(res,'新增贷款档案结果')
					if(res.code==1){
						uni.showToast({
							title:'提交成功,请等待银行审核!',
							icon:'none'
						})
						this.form.id=null
						this.form.name=''		//姓名
						this.form.phone='' 		//手机号码
						this.form.month_income=''//月收入
						this.form.province_id=''
						this.form.city_id=''
						this.form.district_id=''
						this.form.province=''
						this.form.city=''
						this.form.district=''
						this.form.address=''
						this.form.urgent_contact=''
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			// 打开选择
			openSelect(type){
				this.selectType = type
				this.show = true
				if(type==1){
					this.list=[{
						label:'未婚',
						value:'未婚'
					},{
						label:'已婚',
						value:'已婚'
					}]
				}else if(type==2){
					this.list=[{
						label:'初中',
						value:'初中'
					},{
						label:'高中/中专',
						value:'高中/中专'
					},{
						label:'大专/本科',
						value:'大专/本科'
					},{
						label:'硕士',
						value:'硕士'
					},{
						label:'博士及以上',
						value:'博士及以上'
					},]
				}else if(type==3){
					this.list=[{
						label:'3000及以下',
						value:'3000及以下'
					},{
						label:'3001-5000',
						value:'3001-5000'
					},{
						label:'5001-8000',
						value:'5001-8000'
					},{
						label:'8001-10000',
						value:'8001-10000'
					},{
						label:'10001-15000',
						value:'10001-15000'
					},{
						label:'15001-20000',
						value:'15001-20000'
					},{
						label:'20000以上',
						value:'20000以上'
					},]
				}else{
					this.list=[{
						label:'父母',
						value:'父母'
					},{
						label:'配偶',
						value:'配偶'
					},{
						label:'子女',
						value:'子女'
					}]
				}
			},
			// 选择确定
			confirmSelect(e){
				console.log(e,'选择结果')
				if(this.selectType==1){
					this.form.is_marry = e[0].value
				}else if (this.selectType==2){
					this.form.education = e[0].value
				}else if (this.selectType==3){
					this.form.month_income = e[0].value
				}else if (this.selectType==4){
					this.contacts1.relation = e[0].value
				}else if (this.selectType==5){
					this.contacts2.relation = e[0].value
				}else if (this.selectType==6){
					this.contacts3.relation = e[0].value
				}
			},
			// 选择地区
			onChangeRegion(region) {
				console.log(region,'选择区域')
				this.form.province = region[0].name,
				this.form.city= region[1].name,
				this.form.district = region[2].name
				this.form.province_id = region[0].id,
				this.form.city_id = region[1].id,
				this.form.district_id = region[2].id
				this.defaultValue = [region[0].name,region[1].name,region[2].name]
			},
			
			// 上传身份证
			uploadFN(num){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									if(num==1){ //1正面，2反面
										this.topCardImg = data.data.url;
										this.topCardId = data.data.id
									}else{
										this.backCardImg = data.data.url;
										this.backCardId = data.data.id
									}
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.decLoanIndex{
		position: relative;
		background-color: #f1f1f1;
		.formContent{
			width: 100%;
			position: absolute;
			bottom:100rpx;
			left: 0;
			// 身份证
			.cardImgBox{
				padding: 50rpx 20rpx;
				width: 690rpx;
				margin: 20rpx auto;
				border-radius: 10rpx;
				background-color: #fff;
				text{color: #333;}
				.text{
					display: flex;
					align-items: center;
					image{
						width: 24rpx;
						height: 24rpx;
						margin-right: 5rpx;
					}
					color: #C3AB7C;
				}
				.uploadCard{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 40rpx;
					.item{
						width: 310rpx;
						height: 230rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
			// 信息
			.infoBox{
				width: 680rpx;
				margin: 20rpx auto;
				padding: 50rpx 30rpx 0rpx 20rpx;
				.item{
					border-bottom: 2rpx solid #F1F1F1;
					padding: 40rpx 0 0rpx 0 ;
					color: #333;
					text{
						display: block;
					}
					input{
						    width: 100%;
						    text-align: left;
						    color: #333;
						    height: 110rpx;
						    align-content: center;
							font-size: 34rpx;
					}
					.select{
						display: flex;
						align-items: center;
						color: #999;
						    line-height: 100rpx;
							font-size: 34rpx;
							    justify-content: space-between;
					}
					.active{
						color: #333;
					}
					.inputPlace{
						color: #999;
					}
					.iconfont{
						color: #999;
						font-size: 30rpx;
					}
				}
				.contacts{
					margin-top: 30rpx;
					.contactsEme{
						color: #C3AB7C;
					}
				}
			}
			.checkBox{
				margin: 0 50rpx;
				.u-checkbox__icon-wrap{
					border-color: #3B83E8;
				}
				checkbox{
					width: 22rpx;
					height: 22rpx;
				}
				.checkText{
					font: 400 26rpx/76rpx Source Han Sans CN;
					color: #3B83E8;
				}
			}
			// 按钮
			.btn{
				width: 100%;
				button{
					width: 400rpx;
					height: 100rpx;
					margin: 35rpx auto;
					background-color: #3B83E8;
					border-radius: 80rpx;
					color: #fff;
				}
			}
		}
	}
	
</style>
